2018 iT 邦幫忙鐵人賽

DAY 29

Modern Web

菜菜菜的前端學習日誌系列第 29 篇

剪裁效果

2018鐵人賽前端

Andy Tsai

團隊好想工作室第一屆鐵人賽

2018-01-17 21:12:30

8962 瀏覽

分享至

菜菜菜的前端學習日誌 - Day29

剪裁

今天要講的是最近剛學到的效果 “剪裁”

因為要製作一個效果是像這樣

這個logo上像是有一條光閃過去

一直在想一直在想到底這要怎麼做呢

後來就克里斯大大建議我可以用 clip-path 去做

就稍微的研究一下，他就是會再有設定剪裁的範圍內才會顯示東西

今天就用這屬性來做出好玩的效果吧

今天要做的效果類似下面這種

實作

首先我們一樣先建立 Html 的部分吧

<div class="content">
  <p>Lorem100</p>
</div>

lorem100是隨機亂文100個單字，大家自己在 tab 一下就不全部放上來了，太佔版面了。

大概就像這樣

接下來我們美化它一下，再加上一些樣式吧～

*{
  margin: 0;
}
.content{
  width: 500px;
  height: 500px;
  background-color: #A9ECA2;
  padding: 20px;
  box-sizing: border-box;
  color: white;
}
p{
  font-size: 20px;
}

這樣就漂亮多啦～(有嗎？！)

接下來就是重頭戲啦

我們要加上 clip-path這個屬性

使用這個屬性就能夠剪裁出圓形、橢圓及矩形(多邊形)的形狀

接下來就一一介紹一下參數如何設定，以下都會以％作為單位

圓形

               //半徑    圓形中心點
clip-path: circle(50% at 50% 50%);

出來的效果會如下

它就會像是這樣，把設定的元素剪裁成圓形，其他的地方就不見了

橢圓

橢圓跟圓型不太一樣的是他半徑的參數有２個

前面是X軸的參數再來是Y軸的參數

當然如果XY軸都設一樣它也會是圓形

又或是只設一個半徑參數也會是圓形

               //X軸  Y軸    橢圓中心點
clip-path:ellipse(25% 50% at 50% 50%);

矩形(多邊形)

接下來就是矩形啦

要成立一個矩形最少要幾個參數呢？！

答案是要有３個沒錯，因為２個就是一條線了呀～

那它每個參數的值有２個

前面為Ｘ軸的點，後面為Ｙ軸的點

組合起來就是那個點在元素上的座標位置

然後最重要的是不管今天要三角形、正方形甚至是七邊型都一樣

參數的順序一定要一致，要就全部按照順時針設定，要就全部逆時針設定

因為它是一個連續的線段，如果不按照方向性設定可能產生出來的效果會跟自己想的差很多

不太能理解的話，可以自己在紙上畫幾個點然後不按照方向順序的把點跟點連起來

就能知道為什麼了

好的說了這麼多就直接看效果吧

                  X   Y   X   Y  
clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);

登愣！！！六邊型出現啦～

動起來

好的既然會剪裁了

我們就讓圖形動起來唄

就用過前面提過的 animation 來做吧

.content{
  width: 500px;
  height: 500px;
  background-color: #A9ECA2;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  clip-path: polygon(20% 10%,80% 10%,55% 35%,0 35%);;
  animation: move 10s alternate infinite;
}

@keyframes move {
    33% {
        clip-path: polygon(25% 10%,90% 30%,60% 90%,5% 50%);
    }
    66% {
        clip-path: polygon(10% 40%,23% 6%,96% 72%,53% 99%);
    }
}

效果就會是這樣咧

然後可能會覺得奇怪！！

這樣子剪裁把圖型以外的字都剪掉了

那上面那個例子的圖形外面怎麼還有字

因為我們要在建立一個一樣的元素放在他下面

並且把第一個用絕對定位讓他們重疊再一起

<div class="content">
  <p>Lorem100</p>
</div>
<div class="content1">
  <p>Lorem100</p>
</div>

*{
  margin: 0;
}
.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  background-color: #A9ECA2;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  clip-path: polygon(20% 10%,80% 10%,55% 35%,0 35%);
  animation: move 3s alternate infinite;
}
@keyframes move {
    33% {
        clip-path: polygon(25% 10%,90% 30%,60% 90%,5% 50%);
    }
    66% {
        clip-path: polygon(10% 40%,23% 6%,96% 72%,53% 99%);
    }
}
.content1{
  width: 500px;
  height: 500px;
  background-color: #FFE3B0;
  padding: 20px;
  box-sizing: border-box;
}

p{
  font-size: 20px;
}

最後的成果就是這樣啦！！！